<template>
  <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
             :destroy-on-close="true" v-dialogDrag>
    <el-form ref="form" :rules="rules" :model="formEvent.form" label-width="120px" :size="size" :disabled="isDisabled">
      <div style="display:flex">
        <!-- {{OptionData.OptionData_yxzt}} -->
        <el-row :gutter="16">
          <!-- 通过调整lg的大�?  12 24/3=12 会变为一�?3�? -->
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="单位" prop="gldwmc">
              <el-input v-model="formEvent.form.gldwmc" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="物资类别">
              <el-input v-model="formEvent.form.wzlbmc" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="设备类型" prop="sblxmc">
              <el-input v-model="formEvent.form.sblxmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="设备名称" prop="sbmc">
              <el-input v-model="formEvent.form.sbmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="出厂编码" prop="ccbm">
              <el-input v-model="formEvent.form.ccbm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="所属库房" prop="sskfmc">
              <el-input v-model="formEvent.form.sskfmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="规格" prop="sbgg">
              <el-input v-model="formEvent.form.sbgg"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="型号" prop="xh">
              <el-input v-model="formEvent.form.xh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="计量方式" prop="jlfsmc">
              <el-input v-model="formEvent.form.jlfsmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="出厂日期" prop="ccrq">
              <!-- <el-input v-model=""></el-input> -->
              <el-date-picker
                style="width:100%"
                v-model="formEvent.form.ccrq"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="运行状态" prop="yxzt">
              <el-input v-model="formEvent.form.yxztmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="投运日期" prop="tyrq">
              <!-- <el-input v-model=""></el-input> -->
              <el-date-picker
                style="width:100%"
                v-model="formEvent.form.tyrq"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="PT" prop="pt">
              <el-input v-model="formEvent.form.pt"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="CT" prop="ct">
              <el-input v-model="formEvent.form.ct"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否已检测">
              <!-- 10-未投运
    20-在运
    30-退役
    40-报废 -->
              <el-select v-model="formEvent.form.sfjc">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="厂家" prop="cjmc">
              <el-input v-model="formEvent.form.cjmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="创建人" prop="cjr">
              <el-input v-model="formEvent.form.cjr" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="创建时间" prop="cjtime">
              <el-input v-model="formEvent.form.cjtime" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16" style="margin-left:20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div>
              <el-upload
                class="avatar-uploader"
                :http-request="handleChange"
                :show-file-list="false"
                :on-change="updatePhoto"
                :before-upload="allowUpload">
                <img v-if="computedPhoto" :src="computedPhoto" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div>
              <el-image style="width: 180px; height: 180px;" :src="src">
              </el-image>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 主键是不可以编辑的，不可查看�? -->
      <el-input v-model="formEvent.form.sbbm" v-show="false"></el-input>
    </el-form>
  </el-dialog>
</template>

<script>
import {CommonApi} from '@/api/equip/CommonApi.js'
import {FormEvent} from "@/views/equip/equipmentMaintenance/model/equipmentMaintenance-form";
import {reactive} from "vue";
import {generateQRCode} from '@/api/equip/generateQRCode.js'

export default {
  name: "equipmentMaintenanceForm",
  props: {
    formData: {
      type: Object,
      default: () => {
        return {
          cjr: 'admin',
          cjtiime: new Date() + ''
        };
      }
    },
  },
  data() {
    return {
      file_list: [],
      size: "small",
      formEvent: reactive(FormEvent),
      rules: reactive(FormEvent).rules,
      src: '',
      dialogProps: {
        visible: false,
        title: "设备详情",
        width: "80%",
        top: "10px",
      },
      isDisabled: false
    };
  },
  // mounted() {
  //   this.formEvent.initFormData(this.formData);
  //   generateQRCode.getEwmData(this.formEvent.form.sbbm).then(res => {
  //     this.src = res.data[0].ewm
  //   }).catch(err => {
  //     console.log(err)
  //   })
  //   this.formEvent.form.cjr = 'admin'
  //   this.formEvent.form.cjtime = moment().format("YYYY-MM-DD HH:mm:ss")
  // },
  computed: {
    computedPhoto() {
      if (this.formEvent.form.sbzp && this.formEvent.form.sbzp.length > 10) {
        if (this.formEvent.form.sbzp.startsWith("http")) {
          console.log(1111)
          return this.formEvent.form.sbzp;
        } else {
          console.log(this.udsImageUrl + this.formEvent.form.sbzp + "/user.png")
          return this.udsImageUrl + this.formEvent.form.sbzp + "/user.png"

        }
      }
      // return this.imageURL+'photoDefault.png'
    }
  },
  methods: {
    showDialog(isEdit, row, isDisabled) {
      this.isDisabled = isDisabled
      this.formEvent.initFormData(row);
      generateQRCode.getEwmData(this.formEvent.form.sbbm).then(res => {
        this.src = res.data[0].ewm
      }).catch(err => {
        console.log(err)
      })
      this.dialogProps.visible = true;
    },
    allowUpload(file) {  //判断是否允许上传
      return new Promise((resolve, reject) => {

        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/bmp' || file.type === 'image/jpg' || file.type === 'image/gif';
        if (!isJpgOrPng) {
          this.$message.error('非图片格式：jpeg/png/bmp/jpg/gif');
          return reject(false);
        }
        return resolve(true) //如没有问题了那咱们就通过resolve函数添加一个true 让文件上传

      })
    },
    updatePhoto(file, fileList) {
      this.file_list = fileList
      var formData = new FormData();
      formData.append("uploadFiles", file.raw);
      formData.append("fileId", this.formEvent.form.sbbm);
      formData.append("p_id", this.formEvent.form.sbbm);
      formData.append("user_name", "system");
      formData.append("table_name", "en_equip.t_en_wz_equip");
      // formData.append("table_name","en_equip-t_en_wz_equip");
      formData.append("col_name", "sbzp");
      formData.append("bizcType", "0");
      CommonApi.uploadImage(formData).then(res => {
        if (res) {
          const fileId = res.fileid;
          this.formEvent.form.sbzp = fileId;
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    // 移除图片
    photoRemove(file, fileList) {
      // this.photoHide = false;
      this.file_list = []
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //确定关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          // this.handleCancel()
          this.dialogProps.visible = false;
        })
        .catch((_) => {
        });
    },
  },
};
</script>
<style>
.styleA .el-upload--text {
  width: 130px;
  height: 180px;
  line-height: 180px;
}

.styleB .el-upload--text {
  display: none;
}
</style>
<style scoped>
.tool-button-container {
  text-align: right;
}

.el-select {
  width: 100% !important
}

>>> .el-upload {
  width: 180px;
  height: 200px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  line-height: 200px;
  text-align: center;
  font-size: 28px;
}

>>> .el-upload:hover {
  border-color: #409EFF;
}

>>> .avatar-uploader-icon {

  color: #8c939d;
  width: 178px;
  height: 178px;

}

>>> .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-upload-list__item-thumbnail {
  width: 180px;
  height: 200px;
}
</style>
